<!-- 我的录入和信息查询页面 -->
<template>
  <f7-page id="selectview" @page:beforein="getData" ptr @ptr:refresh="getData">
    <f7-navbar :title="context ? '我的入录' : '信息查看'" back-link>
      <div class="right">
        <f7-link icon-fa="plus-square-o" popover-open=".popover-add-menu"></f7-link>
      </div>
    </f7-navbar>
    <f7-toolbar tabbar color="white">
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 0" text="入村督查" @click="checktab(0, '入村督查')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 1" text="入户督查" @click="checktab(1, '入户督查')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 2" text="三个落实" @click="checktab(2, '三个落实')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 3" text="问题清单" @click="checktab(3, '问题清单')"></f7-link>
    </f7-toolbar>
    <f7-searchbar placeholder="输入搜索" :clear-button="true" search-container=".search-list" search-in=".item-title, .item-after, .item-subtitle, .item-text" style="border-top: 1px solid #ccc;"></f7-searchbar>
    <f7-list media-list bg-color="white" class="no-margin search-list searchbar-found">
      <div v-if="viewlist.length === 0" class="text-align-center text-color-gray no-data-div">暂无{{textname}}记录</div>
      <f7-list-item v-for="v in viewlist" :key="v.id" link="#" :after="getstate(v.state)" @click="getoview(v)">
        <div slot="title" v-text="(v.cityname || '') + (v.townname || '') + (v.villagename || '')"></div>
        <div slot="subtitle">督查员：{{v.inspectorname}} &nbsp; {{v.time ? `创建时间：${v.time}` : ''}}</div>
        <div slot="text">上次修改时间：{{v.edittime || v.time}}<br>{{(v.state === 2 || v.state === 6) ? `完成时间：${v.overtime || v.edittime || v.time}` : ''}}</div>
      </f7-list-item>
    </f7-list>
    <f7-list class="searchbar-not-found">
      <f7-list-item title="未找到任何记录"></f7-list-item>
    </f7-list>
    <f7-popover class="popover-add-menu">
      <f7-list>
        <f7-list-item link="#" popover-close title="入村督查" v-if="user.auth.find(item => item.url === 'rcdc')" @click="getoview(null, 0, '入村督查')"></f7-list-item>
        <f7-list-item link="#" popover-close title="入户督查" v-if="user.auth.find(item => item.url === 'rhdc')" @click="getoview(null, 1, '入户督查')"></f7-list-item>
        <f7-list-item link="#" popover-close title="三个落实" v-if="user.auth.find(item => item.url === 'sgls')" @click="getoview(null, 2, '三个落实')"></f7-list-item>
        <f7-list-item link="#" popover-close title="问题清单" v-if="user.auth.find(item => item.url === 'wtqd')" @click="getoview(null, 3, '问题清单')"></f7-list-item>
      </f7-list>
    </f7-popover>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7Toolbar, f7Link, f7Searchbar, f7List, f7ListItem, f7Popover } from 'framework7-vue'
import { mapState } from 'vuex'
export default {
  components: {
    f7Page,
    f7Navbar,
    f7Toolbar,
    f7Link,
    f7Searchbar,
    f7List,
    f7ListItem,
    f7Popover
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  data() {
    return {
      activetab: 0,
      textname: '入村督查',
      viewlist: [],
      context: this.$f7route.context
    }
  },
  created() {
    // 拿到县
    const city = this.user.place.filter(item => item.level === 1)
    this.cityid = []
    city.forEach(item => {
      this.cityid.push(item.id)
    })
  },
  methods: {
    // goadd(page) {
    //   this.$f7.preloader.show()
    //   $f7.views.main.router.navigate(page)
    // },
    getoview(v, type, textname) {
      const context = {
        textname: (textname || this.textname) + (v ? ((this.context && !v.state) ? '编辑' : '查看') : '新增'),
        id: v ? v.id : '', // 标识录入和查看
        type: type || this.activetab,
        status: v ? v.state : 0,
        edit: v ? !!this.context : true,
        page: 'selectview'
      }
      this.$f7.preloader.show()
      this.$f7.views.main.router.navigate('/view', { context })
    },
    checktab(index, name) {
      if (this.activetab === index) return
      this.activetab = index
      this.textname = name
      this.getData()
    },
    async getData(e, done) {
      const list = await this.request('/selectview', { table: this.activetab, type: this.context, userid: this.user.id, cityid: this.cityid.join(',') })
      if (list.code === 0) {
        this.viewlist = []
      } else {
        this.viewlist = list.data
      }
      (typeof done === 'function') && done()
    },
    getstate(state) {
      if (state === 0) {
        return '进行中'
      } else if (state === 1) {
        return '确认中'
      } else if (state === 2) {
        return '已完成'
      } else if (state === 3) {
        return '待转办'
      } else if (state === 4) {
        return '已转办(省)'
      } else if (state === 5) {
        return '待处理'
      } else if (state === 6) {
        return '已处理'
      }
    }
  }
}
</script>